<template>
	<el-row :gutter="20">
		<el-col :span="6">
			<div class="detail">{{ todayData.attendCount }}</div>
			<div class="title">今日活动参加人次</div>
		</el-col>
		<el-col :span="6">
			<div class="detail">￥{{ todayData.activityIncome }}</div>
			<div class="title">今日活动收入</div>
		</el-col>
		<el-col :span="6">
			<div class="detail">{{ todayData.orderNum }}</div>
			<div class="title">今日课程订单数</div>
		</el-col>
		<el-col :span="6">
			<div class="detail">￥{{ todayData.courseIncome }}</div>
			<div class="title">今日课程订单收入</div>
		</el-col>
	</el-row>
</template>

<script>
import { mapState } from "vuex";
export default {
	computed: {
		...mapState("home", ["todayData"]),
	},
};
</script>

<style lang="less" scoped>
.el-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
	.el-col {
		min-height: 36px;
		height: 166px;
		text-align: left;
		background-repeat: no-repeat;
		background-position: 25% 70%, 50% 70%, top left;
		background-size: 30% 3%, 80% 3%, 100% auto;
		&:nth-of-type(1) {
			background-image: url("../../../assets/images/home/1/main-beijing-18-jianbiantiao.png"),
				url("../../../assets/images/home/1/main-beijing-18-jianbiankuai1.png"), url("../../../assets/images/home/1/main-beijing-18.png");
		}
		&:nth-of-type(2) {
			background-image: url("../../../assets/images/home/2/main-beijing-18-jianbiantiao2.png"),
				url("../../../assets/images/home/2/main-beijing-2330-jianbiankuai1.png"), url("../../../assets/images/home/2/main-beijing-2330.png");
		}
		&:nth-of-type(3) {
			background-image: url("../../../assets/images/home/3/main-beijing-2330-jianbiantiao.png"),
				url("../../../assets/images/home/3/main-beijing-18-jianbiankuai2.png"), url("../../../assets/images/home/3/main-beijing-18-2.png");
		}
		&:nth-of-type(4) {
			background-image: url("../../../assets/images/home/4/main-beijing-2330-jianbiantiao2.png"),
				url("../../../assets/images/home/4/main-beijing-2330-jianbiankuai2.png"), url("../../../assets/images/home/4/main-beijing-2330-2.png");
		}
	}
	.title {
		padding: 10px 0 0 30px;
		color: #fff;
		font-size: 20px;
		font-weight: bolder;
	}
	.detail {
		padding: 30px 0 0 30px;
		color: #fff;
		font-size: 26px;
		font-weight: bolder;
	}
}
</style>
